<template>
	<view class="reg">
		<view class="header">
			<view class="logo">
				<u-image src="/static/images/logo.png" width="240rpx" height="268px" mode="widthFix"></u-image>
			</view>
			<view class="title">
				修改密码
			</view>
		</view>
		<view class="middle">
			<u-form :model="model" ref="uForm" :label-width="'200'" :errorType="errorType">
				<u-form-item class="inputarea" :border-bottom="false" prop="mobile">
					<u-input v-model="model.mobile" type="number" border="border" class="input"
						:customStyle="{'padding-left':'2em','padding-top': '6rpx','padding-bottom': '6rpx'}"
						placeholder="请输入手机号码" borderColo />
					<u-icon name="phone-fill" size="40" class="icon"></u-icon>
				</u-form-item>
				<u-form-item class="inputarea" :border-bottom="false" prop="captcha">
					<view class="u-flex">
						<view class="u-flex-1">
							<u-input v-model="model.captcha" type="text" class="input"
								:customStyle="{'padding-left':'2em','padding-top': '6rpx','padding-bottom': '6rpx'}"
								placeholder="输入验证码" borderColo />
							<u-icon name="email-fill" size="40" class="icon"></u-icon>
						</view>
						<view class="wrap">
							<u-toast ref="uToast"></u-toast>
							<u-verification-code :seconds="seconds" @start="start" ref="uCode" @change="codeChange">
							</u-verification-code>
							<u-button size="mini" @click="getCode"
								:customStyle="{'border': '0px','font-size': '24rpx','height': '80rpx'}"
								:hairLine="false">{{tips}}</u-button>
						</view>
					</view>
				</u-form-item>
				<u-form-item class="inputarea" :border-bottom="false" prop="password">
					<u-input v-model="model.password" type="password" border="border" class="input"
						:customStyle="{'padding-left':'2em','padding-top': '6rpx','padding-bottom': '6rpx'}"
						placeholder="请输入新密码" />
					<u-icon name="lock" size="40" class="icon"></u-icon>
				</u-form-item>
				<u-form-item class="inputarea" :border-bottom="false" prop="confirmpwd">
					<u-input v-model="model.confirmpwd" type="password" border="border" class="input"
						:customStyle="{'padding-left':'2em','padding-top': '6rpx','padding-bottom': '6rpx'}"
						placeholder="请重复输入新密码" />
					<u-icon name="lock-fill" size="40" class="icon"></u-icon>
				</u-form-item>
			</u-form>
			<view class="botton">
				<u-button type="primary" :disabled="checked==false" @click="submit">确认修改</u-button>
			</view>
			<!-- <navigator url="/pages/login/login" class="toggle u-font-28">已有账号，点击登录</navigator> -->
			<!-- <navigator url="/pages/login/forgetpassword" class="toggle u-font-14">忘记密码？点击找回</navigator> -->
			<!-- <view class="tips">
				<u-checkbox v-model="checked"></u-checkbox>
				<view class="tipser">
					我已阅读并同意<view class="text">
						<navigator url="/pages/home/regAgreement/regAgreement">《服务协议》</navigator>
					</view>及<view class="text">
						<navigator url="/pages/home/privacyPolicy/privacyPolicy">《隐私政策》</navigator>
					</view>
				</view>
			</view> -->
			<u-select v-model="showregtype" :list="regtypelist" @confirm="decidetype"></u-select>
		</view>
		<slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" @refresh="refresh" @close="close"
			:pintuImg="pintuImg" :pintukuai="pintukuai" :ynumber="ynumber" ref="verifyElement"></slider-verify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				regtypelist: [{
						value: '1',
						label: '商铺'
					},
					{
						value: '2',
						label: '厂房'
					},
					{
						value: '3',
						label: '写字楼'
					}
				],
				showregtype: false,
				togglereg: false, //false为个人注册 true为客户组注册
				list: [{
					name: '个人注册'
				}, {
					name: '客户组注册'
				}],
				current: 0,
				countCodeImg: '', //验证码图片,
				errorType: ['toast'],
				model: {
					mobile: '',
					captcha: '',
					guid: '',
				},
				rules: {
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur'],
						},
					],
					confirmpwd: [{
							required: true,
							message: '请再次输入密码',
							trigger: ['change', 'blur'],
						},
					],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					captcha: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: 'blur'
						}
					],
				},
				tips: '',
				checked: true,
				seconds: 60,
				websetting: {
					address: "",
					adminlogoimg: "",
					copyright: "",
					name: "",
					sitelogoimg: "",
					telphone: ""
				},
				// 滑块验证参数
				sliderVerifyFLag: false,
				pintuImg: '',
				pintukuai: '',
				ynumber: 0
			};
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		created() {
			// this.$store.dispatch('getWebSetting').then(res => { //获取网站信息
			// 	this.websetting = res
			// })
		},
		computed: {
			// logo(){
			// 	return this.fileURL+this.webSetting.sitelogoimg
			// }
		},
		methods: {
			decidetype(v) {
				console.log(v)
				this.model.enterprise = v[0].label;
			},
			selectregtype() {
				this.showregtype = !this.showregtype;
			},
			change(index) {
				this.current = index;
				if (index == 0) {
					this.togglereg = false;
				} else {
					this.togglereg = true;
				}
				this.$refs.uForm.resetFields()
			},
			submit() {
				let that = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.post('/User/Account/FindPassword', this.model).then(res => {
							uni.showToast({
								title: res.msg
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}, 1000)
						}).catch((error) => {

						})
					} else {
						console.log('验证失败');
					}
				});
			},
			codeChange(text) {
				this.tips = text;
			},

			// 获取滑块验证信息
			getSlideCaptch() {
				this.$u.get('/SlideCaptcha/GetSlideCaptcha').then((res) => {
					this.pintuImg = res.src1
					this.pintukuai = res.src2
					this.ynumber = res.ynumber
					this.model.guid = res.guidid
					this.sliderVerifyFLag = true
				})
			},
			// 滑块验证结果回调函数
			verifyResult(oldx) {
				this.model.captcha = Math.round(oldx);
				this.decideCode()
			},
			// 关闭滑块验证弹窗
			close(state) {
				this.sliderVerifyFLag = state
			},
			// 刷新滑块验证
			refresh(state) {
				if (state) {
					this.getSlideCaptch();
				}
			},
			// 验证码确定
			decideCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$u.get('/User/Account/SendResetPasswordCaptcha?mobile=' + this.model.mobile + '&guid=' + this.model.guid +
						'&countresult=' + this.model.captcha).then((res) => {
						if (res) {
							this.sliderVerifyFLag = false;
							this.model.captcha = ""
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();

						} else {
							this.getSlideCaptch();
						}
					}).catch((res) => {
						if(res.data.msg.err){
							this.sliderVerifyFLag = false;
							return
						}
						this.$refs.verifyElement.refreshVerify();
						this.model.captcha = "";
					})
				}
			},
			// 拿guid码
			getGuiCode() {
				this.$u.get('/Captch/GetCountGuid').then((res) => {
					this.model.guid = res.guid;
					if (this.countCodeImg == '') {
						this.countCodeImg = this.baseURL + '/Captch/CountCode?guid=' + res.guid;
					} else {
						// this.$refs.countCodeImg.src = this.baseURL + '/Captch/CountCode?guid' + res.data.guid;
						this.countCodeImg = this.baseURL + '/Captch/CountCode?guid=' + res.guid
						// console.log(this.baseURL + '/Captch/CountCode?guid' + res.data.guid)
					}
				})
			},
			getCode() {
				if (this.model.mobile == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (this.$refs.uCode.canGetCode) {
					this.getSlideCaptch()
				}
			},
			start() {
				this.$u.toast('验证码已发送，请稍后');
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.reg {
		width: 100vw;
		height: 100vh;
		background-color: white;
		padding: 40rpx 80rpx;
		border: 1px solid white;

		.header {
			// margin-top: calc(10rpx + 44px);
			// padding-top: var(--status-bar-height);

			.logo {
				width: 240rpx;
				height: 268rpx;
				margin: 0 auto;
				color: $u-type-error;

				// background-image: url("@/static/images/logo.png");
				// background-position: center;
				// background-size: cover;
				.iconfont {
					font-size: 140rpx;
				}
			}

			.title {
				font-size: 36rpx;
				text-align: center;
				margin-top: 20rpx;
			}

			.title1 {
				font-size: 35rpx;
				margin-top: 20rpx;
				text-align: center;
			}
		}

		.middle {
			margin-top: 50rpx;

			.inputarea {
				position: relative;

				.icon {
					position: absolute;
					top: 44rpx;
					left: 20rpx;
					color: $u-color-grey;
				}

				.wrap {
					// position: absolute;
					// top: 20rpx;
					// left: 420rpx;
					padding: 0;
					border: 0;
					background: inherit;
					border-left: 1px solid $u-color-light;
				}

				.u-flex {
					border: 1px solid #dcdfe6;
					width: 100%;
					border-radius: 8rpx;
					padding: 0 0 0 20rpx;
				}
			}

			.searchpassword {
				display: flex;
				justify-content: space-between;
				text-align: right;
				margin-top: 20rpx;
				font-size: 24rpx;
				color: $u-color-blue;
			}

			.botton {
				margin-top: 20rpx;
			}

			.toggle {
				text-align: center;
				color: $u-color-blue;
				margin-top: 20rpx;
			}

			.tips {
				display: flex;
				font-size: 24rpx;
				justify-content: center;
				align-items: center;
				margin-top: 40rpx;

				.tipser {
					.text {
						color: $u-color-blue;
						display: inline-block;
					}
				}
			}
		}
	}
</style>
